<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<title>酒店列表</title>
<!-- 公用样式css -->

<link href="css/hotel-list.css" rel="stylesheet" type="text/css" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
    <style>
        *{
            margin: 0;
            padding:0;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            -webkit-text-size-adjust:none;
        }
        html{
            font-size:10px;
        }
        body{
            background-color: #f5f5f5;
            font-size: 1.2em;
        }
        .header{
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
        }
        .header h1{
            text-align: center;
            font-size: 2rem;
            font-weight: normal;
        }
        .content{
            max-width: 640px;
            margin: 0 auto;
            background-color: #fff;
        }
        .content .item{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align:center;
            -webkit-box-align:center;
            box-align:center;
            -webkit-align-items:center;
            align-items:center;
            padding:3.125%;
            border-bottom: 1px solid #ddd;
            color: #333;
            text-decoration: none;
        }
        .content .item img{
            display: block;
            width: 40px;
            height: 40px;
            border:1px solid #ddd;
        }
        .content .item h3{
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            max-height: 40px;
            overflow: hidden;
            line-height: 20px;
            margin: 0 10px;
            font-size: 1.2rem;
        }
        .content .item .date{
            display: block;
            height: 20px;
            line-height: 20px;
            color: #999;
        }
        .opacity{
            -webkit-animation: opacity 0.3s linear;
            animation: opacity 0.3s linear;
        }
        @-webkit-keyframes opacity {
            0% {
                opacity:0;
            }
            100% {
                opacity:1;
            }
        }
        @keyframes opacity {
            0% {
                opacity:0;
            }
            100% {
                opacity:1;
            }
        }
    </style>
    <link href="css/dropload.css" rel="stylesheet" type="text/css" />
</head>

<body style="overflow:auto;-webkit-overflow-scrolling: touch;">
	<header class="header">
        <%--<div class="header-left" onclick="_back()"><img class="img-home" src="images/return.png" /></div>--%>
        <div class="header-center word5 "><a href="#" class="header-arrow wor-colour8" onclick="getCity();return false;">${cityName}</a></div>
        <div class="header-right"></div>
    </header>
   <%-- <div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">
        <img style="position:fixed;" src="images/bjimg.jpg" height="100%" width="100%"/>
    </div>--%>
    <div class="content" style="min-height:700px;width:100%;padding-left:5%;padding-right:5%;padding-top:10px;padding-bottom:10px;background: url(images/bjimg.jpg);">
        <div class="lists" ></div>
    </div>
	<div id="loadDataJson" style="display:none;">${loadDataJson}</div>
	<form id="submitForm" action="home/hotelDetails" method="post">
		<input type="hidden" name="url" value="home/hotelList">
		<input type="hidden" id="city" name="city" value="${city}" >
   		<input type="hidden" id="cityName" name="cityName" value="${cityName}">
		<input type="hidden" id="startDate" name="startDate" value="${startDate}">
		<input type="hidden" id="endDate" name="endDate" value="${endDate}">
   		<input type="hidden" id="lat" name="lat" value="${lat}"/>
        <input type="hidden" id="lng" name="lng" value="${lng}"/>
		<input type="hidden" id="hotelKey" name="hotelKey" value="">
		<input type="hidden" name="openId" value="${sessionScope.openId}">
	</form>
</body>
<script src="js/jquery/jquery.js"></script>
<!-- <script src="js/dropload.min.js"></script> -->

<script type="text/javascript">
    $(function(){
    	var loadDataJson=$("#loadDataJson").html();
    	if(loadDataJson!=null && loadDataJson!=""){
	    	var data=eval('(' + loadDataJson + ')');
	        makeList(data);
    	}
    });
    
    // 页数
    var page = 1;
    // 每页展示20个
    var size = 20;
    
    function loadList(){
           var cityName = $("#cityName").val();
           var city = $("#city").val();
           var startDate = $("#startDate").val();
           var endDate = $("#endDate").val();
           var lng = $("#lng").val();
           var lat = $("#lat").val();
           $.ajax({
               type: 'POST',
               url: '<%=basePath%>home/hotelListAjax',
               data: 'page='+page+'&pageSize='+size+'&cityName='+cityName+'&city='+city+'&startDate='+startDate+'&endDate='+endDate+'&lng=key'+lng+'&lat=key'+lat,
               success: function(data) {
	               if(data=null && data.holtels!=null ){
	                   makeList(data.holtels);
	               }
               },
               error: function(XMLHttpRequest, textStatus, errorThrown){
               }
         });
    }
    
    function makeList(holtels){
        if (holtels.length > 0) {
    		var result = '';
            for (var i = 0; i < holtels.length; i++) {
                result +=
                    '<a href="#" onclick="_toDetail(\'' + holtels[i].HotelKey + '\');return false;">'
                    + '<div class="show-box wor-colour8">'
                    + '<img class="show-img" src="' + holtels[i].PicAddress + '" onerror="this.src=\'images/bjimg4.jpg\'"/>'
                    +   '<ul class="show-center">'
                    +       '<li class="word4">' + holtels[i].HotelName
                                if (holtels[i].Distance != "em") {
                                    result +='<span style="float:right;font-size:12px;">'+holtels[i].Distance+'</span>'
                                }
            result +=       '</li>'
                    +       '<li class="show-star">'
                    +       '<div id="starRating">'
                    +       '<p class="photo">'
                    +       '<span><i class="high"></i><i'
                            if (holtels[i].Grade < 1) {
                                result += 'class="nohigh"'
                            }
            result +=       '></i></span><span><i class="high"></i><i'
                            if (holtels[i].Grade < 2) {
                                result += 'class="nohigh"'
                            }
            result +=       '></i></span><span><i class="high"></i><i'
                            if (holtels[i].Grade < 3) {
                                result += 'class="nohigh"'
                            }
            result +=       '></i></span><span><i class="high"></i><i'
                            if (holtels[i].Grade < 4) {
                                result += 'class="nohigh"'
                            }
            result +=       '></i></span><span><i class="high"></i><i'
                            if (holtels[i].Grade < 5) {
                                result += 'class="nohigh"'
                            }
            result +=       '></i></span><span class="starNum">' + holtels[i].Grade + '分</span></p></div>'
                    + 			'<div class="show-number"><span class="word6 lin-h wor-colour2">￥' + holtels[i].StartPrice
                    +			'</span><span class="word3 lin-h">起</span></div>'
                    +       '</li>'
                    +		'<li class="word3" style="text-align:left;overflow:hidden;height:20px;line-height:20px;">' + holtels[i].AddressExplain + '</li>'
                    +   '</ul>'
                    + '</div>'
                    +'</a>' ;
                }
            $('.lists').append(result);
        }
    }
    
    function _toDetail(hotelKey){
        $("#hotelKey").val(hotelKey);
        $("#submitForm").attr("action","home/hotelDetails").submit();
  		$("#submitForm").submit();
    }
    
    function getCity(){
		$("#submitForm").attr("action","home/gardenCity").submit();
		$("#submitForm").submit();
	}
    function _back(){
    	$("#submitForm").attr("action","home/index").submit();
    }
</script>
</html>
